<template>
    <div class="main">
        <input type="text" value="123" ref="val" />
        <button @click="append">添加</button>
        <ul>
            <transition-group
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut"
            >
                <li v-for="(list,index) in arr" :key="list.id">
                    {{list.text}}
                    <button @click="del(index)">删除</button>
                </li>
            </transition-group>
        </ul>
        <router-link to="/news/1">页面1</router-link>
        <br />
        <router-link to="/news/2">页面2</router-link>
        <br />
        <router-link to="/news/3">页面3</router-link>
        <br />
    </div>
</template>

<script>
export default {
    data() {
        return {
            i: 1,
            arr: [
                { text: 1, id: 1 },
                { text: 3, id: 2 },
                { text: 2, id: 3 },
                { text: 4, id: 4 }
            ]
        };
    },
    methods: {
        append() {
            this.arr.push({
                text: this.$refs.val.value,
                id: new Date().getTime()
            });
        },
        del(ind) {
            this.arr.splice(ind, 1);
        }
    }
};
</script>

<style>
</style>